import React, { memo,useState } from 'react';

import { SwitchTransition, CSSTransition } from 'react-transition-group';

import './SwitchTransition.css'

const index = memo(() => {
    const [nams,setNams] = useState(true);
    return (
        <div>
            <SwitchTransition
                mode="in-out"
            >
                <CSSTransition
                timeout={1000}
                key={
                    nams ? 'on' : 'off'
                }
                classNames='fade'
                >
                    <button
                    onClick={e=>setNams(!nams)}
                    >
                        { nams ? 'on' : 'off'}
                    </button>
                </CSSTransition>
            </SwitchTransition>
        </div>
    );
});

export default index;